<template>
  <Dialog :appDialog="appDialog" ref="DialogRef">
    <el-form ref="ruleFormRef" v-model="formData" class="form-box">
      <el-form-item label="隐藏手机号" prop="phone">
        <el-switch v-model="formData.hide_phone" :active-value="1" :inactive-value="2" />
        <el-tooltip class="box-item" placement="right-start">
          <template #content>一旦开启后，将在PC端后台和手机端页面，原<br />本展示线索的手机号将全部隐藏，如线索列表<br />页，但不影响数据导出。 </template>
          <img src="@/assets/icon/question.png" alt="" class="icon" />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="导出时手机号隐藏" prop="exportPhone">
        <el-switch v-model="formData.export_hide_phone" :active-value="1" :inactive-value="2" />
        <el-tooltip class="box-item" placement="right-start">
          <template #content> 开启后，平台所有导出线索列表的表格中的手<br />机号将被隐藏。如：152****8011</template>
          <img src="@/assets/icon/question.png" alt="" class="icon" />
        </el-tooltip>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script setup lang="ts">
  import Dialog from '@/components/Dialog.vue'
  import { ElMessage } from 'element-plus'
  import { attrAdvanced, advancedInfo } from '@/api/customer/clubManage/clueSetting'
  import { ref, watch } from 'vue'
  const DialogRef = ref({})
  const formData = ref({
    hide_phone: 0,
    export_hide_phone: 0,
    id: '',
    clue_attr_advance_id: ''
  })

  // 取消
  const cancelHandel = () => {
    appDialog.value.visible = false
  }

  // 保存
  const submitHandel = () => {
    if (formData.value.id) {
      formData.value.clue_attr_advance_id = formData.value.id || ''
    }
    attrAdvanced(formData.value).then((r: any) => {
      ElMessage.success('保存成功')
      appDialog.value.visible = false
    })
  }

  const appDialog: any = ref({
    visible: false,
    title: '高级设置',
    width: '564px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
  })

  watch(
    () => appDialog.value.visible,
    (val: boolean) => {
      if (val) {
        advancedInfo({}).then((r: any) => {
          formData.value = Object.assign(formData.value, r)
          console.log(formData.value, 666)
        })
      }
    }
  )

  defineExpose({ appDialog })
</script>

<style lang="scss" scoped>
  .form-box {
    height: 218px;
    .icon {
      margin-left: 6px;
      vertical-align: middle;
    }
    .tip-desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
    }
  }
</style>
